## Formtastic

You can use formtastics existing datetime picker
```ruby 
input :start_date, as: :datetime_picker
```


## Use existing gem...

See https://github.com/saepia/just-datetime-picker

## ...or do it manually

* Datetime picker plugin requires jQuery-UI.
    * ref: [Adding a Timepicker to jQuery UI Datepicker](http://trentrichardson.com/examples/timepicker/)

* Use `gem "jquery-ui-rails"`
    * bundle install
    * In app/assets/javascripts/active_admin.js, add `//=require jquery-ui`
    * In app/assets/stylesheets/active_admin.css.scss, add `//= require jquery-ui`

Note: You will need to use `//= require jquery.ui.all` on jquery-ui-rails versions < 5.0

*  Use Datetime picker plugin
    * Copy jquery-ui-timepicker-addon.js to /app/assets/javascripts/
    * Create /app/assets/stylesheets/jquery-ui-timepicker-addon.css provides at page footer.
    * In app/assets/javascripts/active_admin.js, add `//=require jquery-ui-timepicker-addon`
    * In app/assets/stylesheets/active_admin.css.scss, add `/*= require jquery-ui-timepicker-addon.css */`

In active_admin, change the column use

`:as => datepicker` **TO** `:as => :string, :input_html => {:class => "hasDatetimePicker"}`

For example:

* before: `f.input :start_at, :as => :datepicker`
* after: `f.input :start_at, :as => :string, :input_html => {:class => "hasDatetimePicker"}`

You may also be required to specify the following within your model to enable MetaSearch to act as a string on DateTime fields: `search_methods :<field_name>_contains`

In app/assets/javascripts/active_admin.js, add the block shown below

    $(document).ready(function() {
      jQuery('input.hasDatetimePicker').datetimepicker({
        dateFormat: "dd/mm/yy",
        beforeShow: function () {
          setTimeout(
            function () {
              $('#ui-datepicker-div').css("z-index", "3000");
            }, 100
          );
        }
      });
    });

There are some css hack in app/assets/stylesheets/jquery-ui-timepicker-addon.css.

    /* css hack for jquery-ui datepicker */
    #ui-datepicker-div {
    	width: 202px;
    }
    #ui-datepicker-div .ui-state-active {
    	border: 1px solid #7E7783;
    	background: #5F5964;
    	font-weight: bold;
    	color: white;
    	outline: none;
    }
    #ui-datepicker-div .ui-datepicker-header a {
    	margin-top: 8px;
    }
    #ui-datepicker-div .ui-datepicker-header a span {
    	display: block;
    }
    
    
    /* css for timepicker */
    .ui-timepicker-div dl { 
    	text-align: left;
    	color: #5E6469;
    }
    .ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
    .ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
    .ui-timepicker-div td { font-size: 90%; }
    .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }


If the above CSS does not workout and seems to be breaking, refer this customizable CSS [here](https://github.com/Deepak1711/active-admin-patches/blob/master/jquery-ui-timepicker-addon.css).